<template>
  <div class="my-dialog">
    <vxe-modal
      show-zoom
      title="图表"
      resize
      :lock-view="false"
      :mask="false"
      v-model="visible"
      v-if="visible"
      :width="800"
      :height="500"
      @close="handleClose"
      size="small"
    >
      <!-- <div class="my-chart-container">
        <DynamicLineChart
          :chart-data="lineChartData"
          :domID="'DynamicLineChart1'"
        />
      </div> -->
      <div class="my-chart-container">
        <GanttChart :chart-data="lineChartData" :domID="'GanttChart1'" />
      </div>
    </vxe-modal>
  </div>
</template>

<script>
import DynamicLineChart from "@/views/dashboard/DynamicLineChart";
import GanttChart from "@/views/dashboard/GanttChart";
export default {
  name: "Chart",
  data() {
    return {
      visible: false,
      //   "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"
      //   expectedData: [100, 120, 161, 134, 105, 160, 165],
      lineChartData: [
        {
          name: "Mon",
          value: 100,
        },
        {
          name: "Tue",
          value: 120,
        },
        {
          name: "Wed",
          value: 161,
        },
        {
          name: "Thu",
          value: 134,
        },
        {
          name: "Fri",
          value: 105,
        },
        {
          name: "Sat",
          value: 160,
        },
        {
          name: "Sun",
          value: 165,
        },
      ],
    };
  },
  components: {
    DynamicLineChart,
    GanttChart,
  },
  mounted() {},
  methods: {
    open() {
      this.visible = true;
      let count = 1;
      let interval = setInterval(() => {
        count++;
        let obj = {
          name: "Mon" + Number(Math.random() * 100).toFixed(2),
          value: Math.floor(Math.random() * 100),
        };
        this.lineChartData.push(obj);
        if (count > 10) {
          clearInterval(interval);
        }
      }, 1000);
    },
    handleClose() {
      this.visible = false;
      this.$emit("menuClose", "chartRef");
    },
  },
};
</script>

<style scoped lang="scss">
.my-chart-container {
  height: 100%;
  width: 100%;
}
</style>
